<template>
  <div>
    <!-- 1.使用顶部导航组件 -->
    <nav-comp :back="true" title="编辑会员信息"></nav-comp>
    <!-- 8. 间隔槽-->
    <gap-comp :height="1"></gap-comp>
    <!-- 表单区域 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="nickname"
        name="nickname"
        label="用户昵称"
        placeholder="请填写用户昵称"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field name="avatarurl" label="会员头像">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
      <van-field name="sex" label="单选框">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio :name="1">男</van-radio>
            <van-radio :name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 会员生日 -->
      <van-field
        readonly
        clickable
        name="birthday"
        :value="birthday"
        label="日历"
        placeholder="点击选择日期"
        @click="showCalendar = true"
      />
      <van-calendar
        v-model="showCalendar"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirmBirthday"
      />

      <!-- 会员地区 -->
      <van-field
        readonly
        clickable
        name="region"
        :value="region"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirmRegion"
          @cancel="showArea = false"
        />
      </van-popup>

      <div style="margin: 16px">
        <van-button round color="#FF6040" block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      id: "",
      oldImg: "",
      nickname: "",
      avatarurl: "",
      sex: 1,
      uploader: [],
      birthday: "",
      minDate: new Date(2001, 0, 1),
      maxDate: new Date(),
      region: "",
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
      showCalendar: false,
      uid: this.$utils.getUid(),
    };
  },
  mounted() {
    //获取用户数据
    this.getUserInfo();
  },
  methods: {
    // 获取会员编辑数据
    getUserInfo() {
      this.$api
        .reqUserInfo({ uid: this.uid })
        .then((res) => {
          console.log(res[0]);
          // 1.回填用户的旧数据
          let memberInfo = res[0];
          this.nickname = memberInfo.nickname;
          this.uploader = [{ url: this.$pre + memberInfo.avatarurl }];
          this.sex = memberInfo.sex;
          this.birthday = memberInfo.birthday;
          this.region = memberInfo.region;
          // 2.赋值修改数据字段
          this.id = memberInfo.id;
          this.oldImg = memberInfo.avatarurl;
        })
        .catch((err) => console.log(err));
    },
    // 提交编辑信息
    onSubmit(value) {
      //1.组装修改数据
      value.id = this.id;
      if (value.avatarurl[0].file) {
        value.avatarurl = value.avatarurl[0].file;
      } else {
        value.avatarurl = this.oldImg;
      }

      // 2.执行修改请求
      this.$api
        .reqUserEdit(value)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => console.log(err));
    },

    // 同步会员地址
    onConfirmRegion(values) {
      this.region = values.map((item) => item.name).join("");
      this.showArea = false;
    },
    // 同步会员生日
    onConfirmBirthday(date) {
      // 组装会员生日
      this.birthday = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}`;
      this.showCalendar = false;
    },
  },
};
</script>

<style scoped></style>
